<template>
  <div class="shop">
    <!-- <el-button type="primary"
      size='mini'
      @click="addIspService">新增服务商</el-button> -->

    <el-button size='mini'
      style='float:right;'
      type="primary"
      @click="searchIspService">搜索</el-button>
    <!-- <el-input style="float:right;width:140px;margin-left:12px;"
      size="mini"
      v-model="username"
      placeholder="输入合伙人账号搜索"></el-input> -->
          <el-input style="float:right;width:140px;margin-left:12px;"
      size="mini"
      v-model="initalForm.id_name"
      placeholder="输入联系人名称搜索"></el-input>
          <el-input style="float:right;width:140px;margin-left:12px;"
      size="mini"
      v-model="initalForm.mobile"
      placeholder="输入服务商账号搜索"></el-input>

      <el-select style="float:right;width:100px;" v-model="initalForm.type" size="mini">
        <el-option label="全部" value="0"></el-option>
        <el-option label="个人" value="1"></el-option>
        <el-option label="企业" value="2"></el-option>
      </el-select>
      
      <span style="float:right;margin-right:8px;margin-top:4px;">服务商类型:</span>
    <!-- <div class="area"
      style="float:right;">所属区域:
    </div> -->

    <el-table :data="tableData"
      style="width:100%;margin:40px 0;"
      max-height="720"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label="ID"
        prop="id"></el-table-column>
      <el-table-column label="服务商账号">
        <template slot-scope="scope">
          <p v-if='scope.row.user'>{{scope.row.user.mobile}}</p>
          <p v-else>--</p>
        </template>  
      </el-table-column>
  
      <el-table-column label="姓名"
        prop="id_name"></el-table-column>
      <!-- <el-table-column label="服务小店"
        width="140">
        <template slot-scope="scope">
          {{scope.row.shop_count}}<span v-if='scope.row.shop_count !== 0'
            class="look"
            @click="lookServiceShop(scope.row.uid)">（查看）</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="粉丝数"
        width="140">
        <template slot-scope="scope">
          {{scope.row.fans_count}}<span v-if='scope.row.fans_count !== 0'
            class="look"
            @click="lookServiceFans(scope.row.uid)">（查看）</span>
        </template>
      </el-table-column> -->
  
      <!-- <el-table-column label="邀请服务商数"
        width="140">
        <template slot-scope="scope">
          {{scope.row.invitation_count}}<span v-if='scope.row.invitation_count !== 0'
            class="look"
            @click="lookServiceInvitenum(scope.row.uid)">（查看）</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="账号状态"
       >
        <template slot-scope="scope">
          <p v-if="scope.row.is_enable == 0">正常</p>
          <p v-if="scope.row.is_enable == 1">禁用</p>
        </template>
      </el-table-column> -->
      <el-table-column label="服务商类型">
        <template slot-scope="scope">
          <p v-if="scope.row.type == 0">个人</p>
          <p v-else>企业</p>
        </template>
      </el-table-column>
      <el-table-column label="入驻时间">
        <template slot-scope="scope">
          <p v-if='scope.row.created_at'>{{scope.row.created_at}}</p>
          <p v-else>--</p>
        </template>
      </el-table-column>
      <el-table-column label="操作"
        fixed="right">
        <template slot-scope="scope">
          <!-- <el-button type="danager"
            size="mini"
            @click="watchServiceOrder(scope.row.id)">查看订单</el-button> -->
          <!-- <el-button type="danager"
            size="mini"
            @click="IncomeDetail(scope.row.uid)">收益明细</el-button>
            <el-button type="danager"
            size="mini"
            @click="senIspRedPacket(scope.row.uid)">红包记录</el-button>
          <el-button type="primary" v-if="scope.row.user"
            size="mini"
            @click="editIspService(scope.row.id,scope.row.user.mobile)">编辑</el-button> -->
            <el-button type="primary"
            size="mini"
            @click="editIspService(scope.row.id,scope.row.user.mobile)">入驻信息</el-button>
          <!-- <el-button type="danager"
            size="mini"
    
            @click="disableIspService(scope.row.id,scope.row.uid,scope.row.created_at)">移除</el-button> -->
            <!-- <el-button type="danager"
            size="mini"
            v-if='scope.row.is_enable == 1'
            @click="disableIspService(scope.row.id,scope.row.uid,0)">启用</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    

    <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="initalForm.page"
          :page-size="initalForm.size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>


    <!--查看订单-->
    <jdialog :visible.sync="isLookIspOrder" width='640px'>
       <div class="lookorder">
         <i class="el-icon-goods" @click="gotoZiYingOrder(1)"></i>
         <p>自营订单</p>
       </div>
       <div class="lookorder">
         <i class="el-icon-s-unfold" @click="gotoZiYingOrder(2)"></i>
         <p>淘客CPS订单</p>
       </div>
       <div class="lookorder">
         <i class="el-icon-tickets"></i>
         <p>京东CPS订单</p>
       </div>
    </jdialog>
    <!--加盟服务商-->
    <jdialog title="新增服务商"
      :visible.sync="isShowAddService"
      width="800px">
      <div class="shop">
        <!-- <p class="info_title">| 加盟信息</p>
        <div class="line"></div> -->

        <el-form :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm">

          <el-form-item label="服务商账号：" prop="join_mobile">
            <el-input size="mini"
              v-model="form.join_mobile"
              style="width:494px;margin-left:12px;"
              placeholder="请输入服务商账号"></el-input>
          </el-form-item>

          <el-form-item label="推荐人账号：" prop="invitation_mobile">
            <el-input size="mini"
              v-model="form.invitation_mobile"
              style="width:494px;margin-left:12px;"
              placeholder="请输入推荐人账号"></el-input>
          </el-form-item>

          <el-form-item label="姓名："
            prop="self_name">
            <el-input size="mini"
              v-model="form.id_name"
              style="width:494px;margin-left:12px;"
              placeholder="请输入真实姓名"></el-input>
          </el-form-item>
          <el-form-item label="身份证号："
            prop="contacts">
            <el-input size="mini"
              v-model="form.id_no"
              style="width:494px;margin-left:12px;"
              placeholder="请输入身份证号"></el-input>
          </el-form-item>
          
          <el-form-item label="性别:" >
              <el-select placeholder="请下拉选择" v-model ='form.id_sex' size="mini" style="margin-left:12px;">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
               
               
               <el-input size="mini" style="width:180px;float:right;margin-right:134px;" placeholder="请填写民族" v-model="form.id_nation"></el-input>
               <span style="float:right;color:#666;margin-right:8px;">民族:</span>
          </el-form-item>
         
          
          <el-form-item label="请选择出生年月:">
                <el-date-picker
      v-model="form.id_birth"
      type="date"
      size="mini"
      value-format="yyyy-MM-dd"
      style="margin-left:12px;"
      placeholder="选择日期">
    </el-date-picker>
          </el-form-item>

          <el-form-item label="家庭住址:" prop="addresss">
                  <el-select style="width:132px;margin-left:12px;"
          size='mini'
          v-model="province_id"
          filterable
          @change="onChangeProvince"
          class="select"
          placeholder="省份">
          <el-option v-for="item in provinceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
    </el-select>

          <el-select style="width:132px;"
          size='mini'
          v-model="city_id"
          filterable
          @change="onChangeCity"
          class="select"
          placeholder="市">
     <el-option v-for="item in cityList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
    </el-select>
                      <el-select style="width:132px;"
          size='mini'
          v-model="area_id"
          @change="onChangeDown"
          filterable
          class="select"
          placeholder="区/县">

    <el-option v-for="item in townAreaList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
    </el-select>

 
    <el-input v-model="form.address" size="mini" style="width:140px;" placeholder="请输入家庭住址"></el-input>
          </el-form-item>
          <el-form-item label="是否缴费："
            prop="is_reward">
          
            <el-radio v-model="form.is_reward" label="1">已缴费</el-radio>
            <el-radio v-model="form.is_reward" label="0">未缴费</el-radio>

            <span style="color:#666;font-size:12px;">仅支持1次缴费勾选，确认后不可更改</span>
          </el-form-item>

          <el-form-item label='身份证：'
            prop='self_front_card'
            class="id_cer_left">
            <uploadImg flieName="self_front_card"
              class="icon_cate"
              :oldImgs="[form.self_front_card]"
              :n="1"
              @getFile="getFile"></uploadImg>

          </el-form-item>

          <el-form-item label='营业执照：'
            class="id_cer_right">
            <uploadImg flieName="company_license"
              class="icon_cate"
              :oldImgs="[form.company_license]"
              :n="1"
              @getFile="getFile"></uploadImg>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer">
        <el-button size="mini"
          type="danager"
          @click="cancelAddIspSer">取消</el-button>
        <el-button size="mini"
          type="primary"
          @click="certainAddService">确定</el-button>
      </div>
    </jdialog>


      <!--移除、强制移除-->
    <jdialog title="请选择移除类型" :visible.sync='isDeleteType' width='600px;'>
      <div style="padding:20px; text-align:center;">
        <div class="del_left">
           <i class="el-icon-delete-solid" style="cursor:pointer" @click="forceAndRefundDel"></i>
           <p @click="forceAndRefundDel" style="cursor:pointer">强制移除</p>
        </div>
        <div class="del_right">
           <i class="el-icon-s-tools" style="cursor:pointer" @click="refundDelete"></i>
           <p @click="refundDelete" style="cursor:pointer">退款移除</p>
        </div>
      </div>
    </jdialog>
    <jdialog title="强制移除确认" :visible.sync='isForeceDel' width='600px;'>
        <div style="padding:20px;">
          <i class="el-icon-warning-outline" style="color:orange; font-size:24px;"></i> <span style="margin-left:8px;font-size:15px;">强制移除确认</span>
          <p style="padding:20px 0;font-size:14px;">此操作后，服务商关联的邀请关系和上下级粉丝关系将会被移除，小店身份变为乐粉，是否继续操作?</p>
          <div style="text-align:center;margin:0 0 12px 0;">
             <el-button size="mini" @click="isForeceDel = false">取消</el-button>
             <el-button size="mini" type="primary" @click="certainForeceDelAndRefunc">确认</el-button>
          </div>
        </div>
      </jdialog>
          <jdialog title="退款移除确认" :visible.sync='isRefundDel' width='600px;'>
        <div style="padding:20px;">
          <i class="el-icon-warning-outline" style="color:orange; font-size:24px;"></i> <span style="margin-left:8px;font-size:15px;">退费移除确认</span>
          <p style='padding:10px 0;'>当前可退费比例:<span>{{rate}}%</span></p>
          <p style='padding:0 0 16px 0;'>退费移除后，会员店身份被回收，变为乐粉，通过系统退费.</p>
          <div style="text-align:center;margin:0 0 12px 0;">
             <el-button size="mini" @click="isRefundDel = false">取消</el-button>
             <el-button size="mini" type="primary" @click="certainRefunc">确认</el-button>
          </div>
        </div>
      </jdialog>
  </div>
</template>

<script>
import {serviceProviderSearch,
       commonChilderRegionList,
       serviceProviderIsEnableUpdate,
       serviceProviderCreate,
       serviceProviderFilterRegion,
       servicePorviderRemove} from '@/api/service'
import uploadImg from "@/components/uploadImg";

export default {
  components: {
    uploadImg
  },
  data () {
    return {
      province_id: "",
      provinceList: [],
      addprovinceList:[],

      city_id: "",
      cityList: [],
      addcityList:[],

      area_id: "",
      townAreaList: [],
      addtownAreaList:[],

      town_id:[],
      streetList:[],
      addstreetList:[],

      streetArea_id:'',
      streetAreaList:[],
      addstreetAreaList:[],

      initalForm: {
        mobile:'',
        type:'',
        id_name:'',
        page:1,
        size:20
      },
      type:'',

      total:0,
      tableData: [],

      //加盟服务商
      isShowAddService: false,
      form: {
        province_id:'',
        city_id:'',
        area_id:'',
        town_id:'',
        streetArea_id:'',
        join_mobile: '',
        invitation_mobile:'',
        is_reward:'',
        contacts:'',
        company_license:'',
        self_front_card:'',
        self_phone:'',
        self_name:'',
        id_no:'',//身份证号
        id_name:'',//姓名
        id_sex:'',//性别
        id_nation:'',//民族
        id_birth:'',//生日
        id_full_address:'',//地址
        province:'',//省
        city:'',//市,
        area:'',//区,
        adcode:'',//区adcode
        address:'',//地址
      },
      rules: {
        join_mobile:[{
          required: true, message: '请选择服务商账号', trigger: 'blur'
        }],
        invitation_mobile: [{
          required: true, message: '请选择推荐人账号', trigger: 'blur'
        }],
        district: [
          { required: true, message: '请选择服务区域', trigger: 'blur' },
        ],
        id_name: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 1, max: 30, message: '长度不能少于一个字符', trigger: 'blur' }
        ],
        id_no: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
          { min: 1, max: 30, message: '长度不能少于一个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入家庭住址', trigger: 'blur' },
          { min: 1, max: 30, message: '长度不能少于一个字符', trigger: 'blur' }
        ],
        // self_phone: [
        //   { required: true, message: '请输入联系电话', trigger: 'blur' },
        //   { min: 1, max: 18, message: '长度不能少于一个字符', trigger: 'blur' }
        // ],
        is_reward: [
          { required: true, message: '请选择是否缴费', trigger: 'change' },
        ],
       
        self_front_card: [
          { required: true, message: '请上传身份证图片', trigger: 'blur' }
        ],
        company_license: [
          { required: true, message: '请上传营业执照图片', trigger: 'blur' }
        ]
      },

      //查看订单
      isLookIspOrder:false,

      //移除,强制移除
      isDeleteType:false,
      isForeceDel:false,
      isRefundDel:false,
      delId:'',
      delUid:'',
      rate:0,
      current_time:'',
    }
  },
  mounted () {
    //  this.getcommonChilderRegionList(1,0)
    //  this.getserviceProviderFilterRegion(1,0)
  },
  created () {
    this.getserviceProviderSearchData()
  },
  methods: {
    //新增服务商
    addIspService () {
      this.isShowAddService = true
    },
    //搜索
    searchIspService () {
     this.getserviceProviderSearchData()
    },
     //切换省市
   onChangeProvince(e){
      this.city_id = this.area_id = ''
     this.getcommonChilderRegionList(2,e)
     this.provinceList.map(item => {
       if(item.id == e){
         this.form.province = item.name
       }
     })

   },
   onChangeCity(e){
     this.area_id = ''
     this.getcommonChilderRegionList(3,e)
               this.cityList.map(item => {
       if(item.id == e){
         this.form.city = item.name
       }
     })
   },
   //切换区
   onChangeDown(e){
     this.form.adcode = e
     this.getcommonChilderRegionList(4,e)
        this.townAreaList.map(item => {
       if(item.id == e){
         this.form.area = item.name
       }
     })
   },
   onChangeProvinceAdd(e){
     this.form.city_id = this.form.area_id = this.form.town_id= this.form.streetArea_id = ''
     this.getserviceProviderFilterRegion(2,e)
   },
   onChangeCityAdd(e){
     this.form.area_id = this.form.town_id = this.form.streetArea_id = ''
     this.getserviceProviderFilterRegion(3,e)
   },
   //切换区
   onChangeDownAdd(e){
     this.form.town_id = this.form.streetArea_id = ''
     this.getserviceProviderFilterRegion(4,e)
   },
   //切换街道
   onChangeStreet(e){
     this.form.streetArea_id = ''
    this.getserviceProviderFilterRegion(5,e)
   },
    //查看订单
    watchServiceOrder (id) {
      console.log(id)
      this.isLookIspOrder = true
    },
    //收益明细
    IncomeDetail (id) {
      this.$router.push({
        path:'./ispIncomeDetail',
        query:{serviceId:id}
      })
    },
    //发红包记录
    senIspRedPacket(id){
       this.$router.push({
        path:'./ispRedPacket',
        query:{serviceId:id}
      })
    },
    //编辑
    editIspService (id,mobile) {
      this.$router.push({
        path: './ispEditService',
        query: { serviceId: id ,mobile:mobile}
      })
    },
    //移除
    disableIspService (id,uid,time) {
      
      //  this.$confirm('服务商移除是不可逆操作，移除后，服务商原有关联的小店和收益关系将会解除绑定是否继续？', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消'
      // }).then(() => {
      //   console.log(status)
      //   this.getservicePorviderRemoveData(id,uid)
      // }).catch(() => {
      //   console.log('cancel')
      // });
      this.isDeleteType = true
      this.delId = id
      this.delUid  = uid
      this.current_time = time
    },

    //服务小店
    lookServiceShop (id) {
      this.$router.push({
        path: './ispServiceDetail',
        query:{
          serviceId:id,
          type:'second'
        }
      })
    },
    //粉丝数
    lookServiceFans (id) {
      this.$router.push({
        path: './ispServiceDetail',
        query:{
          serviceId:id,
          type:'first'
        }
      })
    },
    //邀请服务商数
    lookServiceInvitenum (id) {
  
      this.$router.push({
        path: './ispServiceDetail',
        query:{
          serviceId:id,
          type:'third'
        }
      })
    },
    //确定添加服务商
    certainAddService () {

      this.getserviceProviderCreateData()
    },
    //取消添加服务商
    cancelAddIspSer () {
      this.isShowAddService = false
      this.form = {
          province_id:'',
        city_id:'',
        area_id:'',
        town_id:'',
        streetArea_id:'',
        join_mobile: '',
        invitation_mobile:'',
        is_reward:'',
        contacts:'',
        company_license:'',
        self_front_card:'',
        self_phone:'',
        self_name:'',
        id_no:'',//身份证号
        id_name:'',//姓名
        id_sex:'',//性别
        id_nation:'',//民族
        id_birth:'',//生日
        id_full_address:'',//地址
        province:'',//省
        city:'',//市,
        area:'',//区,
        adcode:'',//区adcode
        address:'',//地址
      }
    },
    //分页
    pageChange (page) {
      this.initalForm.page = page
      //获取更多数据
      this.getserviceProviderSearchData()
    },
  //获取列表数据
  
   async getserviceProviderSearchData(){
    
       serviceProviderSearch(this.initalForm).then(res => {
        if(res.code === 10000){
         this.tableData = res.data.data
         this.total  = res.data.total
      }else{
        this.$message.error(res.message)
      }
      })
   },
   //获取省市区相关 
   async  getcommonChilderRegionList(type,id){
    var url = 'parent_id='+id;
    let res = await commonChilderRegionList(url)
   if(type == 1){
      this.provinceList = res.data
   }
   if(type == 2){
      this.cityList = res.data
   }
   if(type == 3){
      this.townAreaList = res.data
   }
   if(type == 4){
     this.streetList = res.data
   }else if(type == 5){
     this.streetAreaList = res.data
   }
  },
    //获取省市区过滤相关
   async getserviceProviderFilterRegion(type,id){
     let res = await serviceProviderFilterRegion(id)
     if(type == 1){
       this.addprovinceList =  res.data
     }
     if(type == 2){
      this.addcityList = res.data
   }
   if(type == 3){
      this.addtownAreaList = res.data
   }
   if(type == 4){
     this.addstreetList = res.data
   }else if(type == 5){
     this.addstreetAreaList = res.data
   }
   },
  //服务商开启，禁用
  async getserviceProviderIsEnableUpdateData(id,uid, status){
    let  res = await serviceProviderIsEnableUpdate({id:id,uid:uid,status:status})
    if(res.code === 10000){
       this.$message.success(res.message)
       this.getserviceProviderSearchData()
    }else{
      this.$message.error(res.message)
    }
  },
  //移除服务商
  async getservicePorviderRemoveData(id,uid,type){
   let res = await servicePorviderRemove({id:id,uid:uid,type:type})
   if(res.code === 10000){
       this.$message.success(res.message)
       this.getserviceProviderSearchData()
    }else{
      this.$message.error(res.message)
    }
  },
  //创建社区服务商
  async getserviceProviderCreateData(){
    // if(!this.form.streetArea_id){
    //   this.$message.error('请选择服务区域')
    //   return
    // }
    // if(!this.form.self_name){
    //   this.$message.error('真实姓名不能为空')
    //   return
    // }
    // if(!this.form.contacts){
    //   this.$message.error('联系人不能为空')
    //   return
    // }

    // if(!this.form.self_phone){
    //   this.$message.error('联系电话不能为空')
    //   return
    // }
    if(!this.form.is_reward){
      this.$message.error('未选择是否缴费')
      return
    }
    if(!this.form.self_front_card){
      this.$message.error('身份证未上传')
      return
    }
    // if(!this.form.company_license){
    //   this.$message.error('营业执照未上传')
    //   return
    // }
 
    let  res = await serviceProviderCreate({
      // region_id:this.form.streetArea_id,
      join_mobile:this.form.join_mobile,
      invitation_mobile:this.form.invitation_mobile,
      contacts:'',
      is_reward:this.form.is_reward,
      company_license:this.form.company_license,
      self_front_card:this.form.self_front_card,
      // self_phone:this.form.self_phone,
      // self_name:this.form.self_name
      id_no:this.form.id_no,
      id_name:this.form.id_name,
      id_sex:this.form.id_sex,
      id_nation:this.form.id_nation,
      id_birth:this.form.id_birth,
      id_full_address:this.form.province+this.form.city+this.form.area+this.form.address,
      province:this.form.province,
      city:this.form.city,
      area:this.form.area,
      address:this.form.address,
      adcode:this.form.adcode
    })
    if(res.code === 10000){
       this.$message.success(res.message)
        this.form = {
              province_id:'',
        city_id:'',
        area_id:'',
        town_id:'',
        streetArea_id:'',
        join_mobile: '',
        invitation_mobile:'',
        is_reward:'',
        contacts:'',
        company_license:'',
        self_front_card:'',
        self_phone:'',
        self_name:'',
        id_no:'',//身份证号
        id_name:'',//姓名
        id_sex:'',//性别
        id_nation:'',//民族
        id_birth:'',//生日
        id_full_address:'',//地址
        province:'',//省
        city:'',//市,
        area:'',//区,
        adcode:'',//区adcode
        address:'',//地址
      }
      this.getserviceProviderSearchData()
       this.isShowAddService = false
    }else{
      this.$message.error(res.message)
    }
  },
    //点击前往订单
    gotoZiYingOrder(type){
      this.isLookIspOrder = false
      if(type == 1){
          //自营订单
         this.$router.push({
           path:'../autarky/privateorderlist'
         })
      }else if(type == 2){
        //淘客cps订单
        this.$router.push({
           path:'../autarky/serviceArea'
         })
      }else{
        //京东cps订单
        
      }
      
    },

    //退款移除
    forceAndRefundDel(){
      this.isForeceDel = true
      
    },
    //退费退款移除
    refundDelete(){
     
       var time_diff = new Date().getTime() - new Date(this.current_time).getTime();
 // 计算相差天数 
 var days = Math.floor(time_diff / (24 * 3600 * 1000));
 console.log(days)
 if (days<4) {
    this.rate = 100;
     this.isRefundDel = true
 }else if(days<15){
   this.rate = 70
    this.isRefundDel = true
 }else{
   this.$message.error('超过14天不支持退费移除')
   return
 }
    },
    //强制确认、退款确认
    certainForeceDelAndRefunc (){
      this.isForeceDel = false
        this.getservicePorviderRemoveData(this.delId,this.delUid,1)
    },
    //退款移除确认
    certainRefunc (){
     this.isRefundDel = false
     this.getservicePorviderRemoveData(this.delId,this.delUid,2)
    },
    getFile (file) {
      this.form[file.name] = file.files.length > 0 ? file.files[0].url : "";
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
}
</script>
<style lang="scss" scoped>
.shop {
  padding: 20px;
  .area {
    color: #333333;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
  }
  .look {
    color: #f4222d;
    font-size: 13px;
    cursor: pointer;
  }
  .pagination{
    float: right;
  }
  .info_title {
    font-weight: 700;
    font-size: 16px;
    margin-left: 12px;
  }
  .line {
    height: 1px;
    width: 100%;
    background-color: #e5e5e5;
  }
  .id_cer_left {
    float: left;
  }
  .id_cer_right {
    float: right;
    margin-right: 120px;
  }
  .footer {
    text-align: center;
    margin: 100px 0 20px;
  }
  .lookorder{
    text-align: center;
    float: left;
    width: 200px;
    padding: 20px;
    p{
      color: #666666;
      margin-top: 16px;
    }
  }
  .el-icon-goods,.el-icon-s-unfold,.el-icon-tickets{
    font-size: 36px;
    color: #666666;
    cursor: pointer;
  }

    .del_left,.del_right{
    text-align: center;
    float: left;
    width: 50%;
    i{
      font-size: 48px;
      color: #999999;
    }
    p{
      margin: 10px 0 20px 0;
      color: #666666;
      font-size: 14px;
    }
  }
}
</style>

